<template>
  <div class="login-cpt-wrap">
    <el-dropdown
      v-if="isLogin"
      trigger="hover"
    >
      <div class="el-dropdown-link">
        <a>登录</a>
        <el-icon>
          <ArrowDown />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <template v-if="frontendData && frontendData.frontend">
            <div>
              <el-dropdown-item>
                <el-link
                  type="success"
                  :disabled="frontendData.frontend.frontend_qq_login === 2"
                  @click="qqLogin"
                >
                  QQ登录
                </el-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-link
                  type="primary"
                  :disabled="frontendData.frontend.frontend_github_login === 2"
                  @click="githubLogin"
                >
                  GitHub登录
                </el-link>
              </el-dropdown-item>
            </div>
          </template>
          <el-dropdown-item v-else>
            未开启
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown
      v-else
      trigger="hover"
    >
      <div class="el-dropdown-link">
        <a>{{ userInfo ? userInfo.username : '登录' }}</a>
        <el-icon>
          <ArrowDown />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <span @click="logout()">登出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue' // , inject, ref
import { appStore } from '@/store/app'
import { userStore } from '@/store/user'
// import { articleStore } from '@/store/article'

import {
  GITHUB_OAUTH_URL,
  QQ_OAUTH_URL,
  REDIRECT_URI,
  QQ_CLIENT_ID,
  GITHUB_CLIENT_ID
} from '@/constant'

const app = appStore()
const user:any = userStore()
// const article:any = articleStore()

// const $newmessage:any = inject('$newmessage')
// const $post:any = inject('$post')

// const username = ref('')
// const password = ref('')
// const visible = ref(true)
// const dialogVisible = ref(false)
// const dialogtwo = ref(false)

const frontendData:any = computed(() => {
  return app.frontendData
})

const userInfo = computed(() => {
  return user.userInfo
})

const isLogin = computed(() => {
  return !user.userInfo
})

const qqLogin = () => {
  const url =
        QQ_OAUTH_URL +
        'client_id=' +
        QQ_CLIENT_ID +
        '&redirect_uri=' +
        REDIRECT_URI +
        'qq_login' +
        '&state=99&scope=get_user_info,get_vip_info,get_vip_rich_info'
  window.open(
    url,
    'qq_login_window',
    'toolbar=yes,location=no,directories=no,status=no,menubar=no,scrollbars=no,titlebar=no,toolbar=no,resizable=no,copyhistory=yes, width=918, height=609,top=250,left=400'
  )
}

const githubLogin = () => {
  const url =
        GITHUB_OAUTH_URL +
        'client_id=' +
        GITHUB_CLIENT_ID +
        '&redirect_uri=' +
        REDIRECT_URI +
        'github_login' +
        '&scope=user'
  window.open(
    url,
    'github_login_window',
    'toolbar=yes,location=no,directories=no,status=no,menubar=no,scrollbars=no,titlebar=no,toolbar=no,resizable=no,copyhistory=yes, width=918, height=609,top=250,left=400'
  )
}

// const register = async () => {
//   if (username.value === '' || password.value === '') {
//     $newmessage('请输入完整！', 'error')
//   } else {
//     try {
//       // 正则匹配用户名，格式要求：8-16位；只允许大小写字母、数字、下划线
//       const usernameReg = /[0-9a-zA-Z_]{6,12}$/g
//       if (!usernameReg.test(username.value)) {
//         throw new Error('格式要求：8-16位；只允许大小写字母、数字、下划线')
//       }
//       // 正则匹配密码，格式要求：8-16位；只允许大小写字母、数字、下划线；且不能全是大小写字母/数字/下划线
//       const pwdReg =
//             /^(?![0-9]+$)(?![a-zA-Z]+$)(?![_]+$)[0-9a-zA-Z_]{8,16}$/g
//       if (!pwdReg.test(password.value)) {
//         throw new Error(
//           '密码格式要求：8-16位；只允许大小写字母、数字、下划线；且不能全是大小写字母/数字/下划线'
//         )
//       }
//     } catch (error) {
//       $newmessage(error, 'error')
//       return
//     }
//     await $post('user/register', {
//       username: username.value,
//       password: password.value
//     })
//       .then((res:any) => {
//         $newmessage('注册成功!', 'success')
//         setTimeout(() => {
//           dialogtwo.value = false
//         }, 500)
//       })
//       .catch((error:any) => {
//         $newmessage(error.message, 'error')
//       })
//   }
// }
// const login = () => {
//   if (username.value === '' || password.value === '') {
//     $newmessage('请输入完整！', 'error')
//   } else {
//     user.login({ username: username.value, password: password.value })
//       .then((res:any) => {
//         $newmessage(res.message, 'success')
//         dialogVisible.value = false
//         user.getUserInfo()
//       })
//       .catch((error:any) => {
//         console.log(error)
//       })
//   }
// }
const logout = () => {
  user.logout()
}
// const querySearchAsync = async (keyWord, cb) => {
//   if (keyWord) {
//     await user.findarticle({ keyWord })
//     setTimeout(() => {
//       cb(article.search)
//     }, 300)
//   } else {
//     setTimeout(() => {
//       cb([])
//     }, 300)
//   }
// }
// const headershow = () => {
//   // 头部高度为70px
//   const height = 70
//   const offsetTop = window.pageYOffset || document.documentElement.scrollTop
//   visible.value = offsetTop < height
// }
</script>

<style>
@media screen and (max-width: 992px) {
  .dialog .el-dialog {
    width: 50% !important;
  }
}
@media screen and (max-width: 540px) {
  .dialog .el-dialog {
    width: 80% !important;
  }
}
</style>

<style lang="scss" scoped>
.login-cpt-wrap {
  display: flex;
  align-items: center;
}
.qq-login {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
